<template>
  <footer class="footer">
    <div class="footer-left">
        <div class="left-img"> <img src=".././assets/bottom-logo.png"></div>
        <div class="line-left"></div>
        <div  class="left-content">
          <div>主办单位：航天科工集团有限公司</div>
          <div>承办单位：航天科工网络信息发展有限公司</div>
          <div>服务热线：400-888-8888</div>
        </div>       
    </div>
    <div class="footer-right">
          <div class="right-content">网站纠错</div>
          <div class="line-right"></div>
          <div class="right-content">服务条款</div>
    </div>

  </footer>
</template>

<script>
export default {
  name: 'Footer',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer{
    background:rgb(27,27,27);
    height:120px;
    display:flex;
    justify-content:space-between;
}
.footer-left{
 display:flex;
}
.footer-right{
  margin-right:20px;
  color:#fff;
  display:flex;
  line-height:120px;
}
.left-img{
  -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

}
.line-left{
   position: relative;
  top: 50%; 
  transform: translateY(-50%);
  margin-left:10px;
  height:90px;
  width:2px;
  background-color:#fff;
}
.left-content{
  line-height:30px;
  color:#fff;
  padding:15px 20px;
}
.line-right{
   position: relative;
  top: 50%; 
  transform: translateY(-50%);
  margin-left:10px;
  height:20px;
  width:2px;
  background-color:#fff;
}
.right-content{
  padding-left:10px;
}
</style>
